<!-- 页面说明 -->
<template>
  <main class="page-main">
    <div v-for="group in list" class="width">
      <div class="groupTitle margin-bottom-20">{{ group.groupName }}</div>
      <MenuButtonCheckBox v-for="menu in group.menuList" :menu="menu" :rightIds="checkedList"
                          @changed="handleMenuChanged" :key="menu.menuId"/>
    </div>
    <div class="width text-center">
      <a-button type="primary" @click="handleSetRight">保存</a-button>
    </div>
  </main>
</template>
<script lang="ts">

import * as api from "@/api/AuthResourceApi"
import * as apiUtil from "@/api/ApiUtils"
import * as roleApi from "@/api/AuthRoleApi"
import MenuButtonCheckBox from "@/components/MenuButtonCheckBox.vue";
import {notification} from "ant-design-vue";

export default {
  props: {
    roleId: {type: Number}
  },
  components: {
    MenuButtonCheckBox
  },
  data() {
    return {
      list: [],
      checkedList: [],
      map: new Map()
    }
  },
  methods: {
    handleMenuChanged(key, value) {
      this.map.set(key, value);
      this.checkedList = [];
      for (let array of this.map.values()) {
        if (array) {
          for (let id of array) {
            this.checkedList.push(id);
          }
        }
      }
    },
    /**
     * 为角色设置权限
     */
    handleSetRight() {
      roleApi.setRight({
        id: this.$props.roleId,
        rightIds: this.checkedList
      }).then((res) => {
        if (apiUtil.isSuccessed(res)) {
          this.$emit("close");
          notification.success({
            message: "保存成功",
            description: "权限设置已生效"
          });
        }
      })
    },
  },
  computed: {},

  watch: {},
  mounted() {
    //查询角色的权限
    roleApi.getById(this.$props.roleId).then((res) => {
      if (apiUtil.isSuccessed(res)) {
        this.checkedList = res.data.rightIds ? res.data.rightIds : [];
        //查询权限树
        api.tree().then((res) => {
          if (apiUtil.isSuccessed(res)) {
            this.list = res.data;
          }
        });
      }
    })
  }
}
</script>
<style scoped>
.menuTitle {
  font-weight: bold;
}

.groupTitle {
  font-size: 20px;
}
</style>